<template>
  <v-container fluid grid-list-md>
    <v-layout row wrap>
      <v-layout md12 row>
        <v-flex md2 sm1>
          <v-text-field mask="######" name="lftid" label="业务员ID" v-model="queryForm.lftid" counter="6" type="number" maxLength="6"></v-text-field>
        </v-flex>
        <v-flex md2 sm1>
          <v-text-field name="nickname" label="姓名" v-model="queryForm.realName"></v-text-field>
        </v-flex>
        <v-flex md2 sm1>
          <v-text-field mask="######" name="superId" label="上级ID" v-model="queryForm.superId" counter="6" type="number"></v-text-field>
        </v-flex>
        <v-flex md2>
          <v-select :items="levelItems" v-model="queryForm.saleLevel"></v-select>
        </v-flex>
        <v-flex md2 sm1>
          <v-btn @click="search" dark color="blue" class="mt-2">
            <v-icon>search</v-icon>
            <span class="pl-2 subheading">搜索</span>
          </v-btn>
        </v-flex>
      </v-layout>
      <v-flex row md12>
        <v-card>
          <table cellspacing="0" cellpadding="0" border="0" class="col-table-header" style="width: 100%;">
            <thead>
              <tr>
                <th colspan="1" rowspan="2">
                  <div>级别</div>
                </th>
                <th colspan="1" rowspan="2">
                  <div>业务员ID</div>
                </th>
                <th colspan="1" rowspan="2">
                  <div>微信昵称</div>
                </th>
                <th colspan="1" rowspan="2">
                  <div>上级ID</div>
                </th>
                <th colspan="2" rowspan="1">
                  <div>平级代理</div>
                </th>
                <th colspan="2" rowspan="1">
                  <div>一级代理</div>
                </th>
                <th colspan="2" rowspan="1">
                  <div>二级代理</div>
                </th>
                <th colspan="2" rowspan="1">
                  <div>间接二级</div>
                </th>
                <th colspan="1" rowspan="2">
                  <div>线路业绩
                    <br/>(元)</div>
                </th>
                <th colspan="1" rowspan="2">
                  <div>线路购买
                    <br/>钻石数</div>
                </th>
                <th colspan="1" rowspan="2">
                  <div>团队业绩
                    <br/>(元)</div>
                </th>
                <th colspan="1" rowspan="2">
                  <div>团队购买
                    <br/>钻石数</div>
                </th>
                <th colspan="1" rowspan="2">
                  <div>工资</div>
                </th>
                <th colspan="1" rowspan="2">
                  <div>操作</div>
                </th>
              </tr>
              <tr>
                <th colspan="1" rowspan="1">
                  <div>本月</div>
                </th>
                <th colspan="1" rowspan="1">
                  <div>总共</div>
                </th>
                <th colspan="1" rowspan="1">
                  <div>本月</div>
                </th>
                <th colspan="1" rowspan="1">
                  <div>总共</div>
                </th>
                <th colspan="1" rowspan="1">
                  <div>本月</div>
                </th>
                <th colspan="1" rowspan="1">
                  <div>总共</div>
                </th>
                <th colspan="1" rowspan="1">
                  <div>本月</div>
                </th>
                <th colspan="1" rowspan="1">
                  <div>总共</div>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item of tableData" :key="item.id">
                <td>{{item.saleLevel | SalesLevel}}</td>
                <td>{{item.lftid}}</td>
                <td>{{item.nickname}}</td>
                <td>{{item.superId}}</td>
                <td>{{item.peersMonth}}</td>
                <td>{{item.peersTotal}}</td>
                <td>{{item.oneMonth}}</td>
                <td>{{item.oneTotal}}</td>
                <td>{{item.twoMonth}}</td>
                <td>{{item.twoTotal}}</td>
                <td>{{item.indirectMonth}}</td>
                <td>{{item.indirectTotal}}</td>
                <td>{{item.totalSale}}</td>
                <td>{{item.totalNumber}}</td>
                <td>{{item.underlingSale}}</td>
                <td>{{item.underlingNumber}}</td>
                <td>{{item.salary}}</td>
                <td>
                  <v-btn flat round dark color="green darken-1" class="mx-1" @click="change(item)">
                    <span class="mx-1">更改级别</span>
                    <v-icon color="green darken-1">swap_vert</v-icon>
                  </v-btn>
                </td>
              </tr>
            </tbody>
          </table>
        </v-card>
        <div class="text-xs-center my-2">
          <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
        </div>
      </v-flex>
    </v-layout>
    <v-dialog v-model="dialog" max-width="500px">
      <v-card>
        <v-card-title>
          <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-layout wrap column class="px-4">
            <v-flex md12 class="my-2">
              <span class="title">业务员ID: {{salesId}}</span>
            </v-flex>
            <v-flex md6>
              <v-select :items="levelItems" v-model="levelSelect" label="请选择业务员级别" target="#dropdown"></v-select>
            </v-flex>
            <v-flex md12>
              <ul class="salesman-details-list">
                <li>有效代理人数:&nbsp;{{details.validProxyNumber}}</li>
                <li>见习业务员人数:&nbsp;{{details.practiceSalesNumber}}</li>
                <li>正式业务员人数:&nbsp;{{details.officialSalesNumber}}</li>
                <li>高级业务员人数:&nbsp;{{details.seniorSalesNumber}}</li>
                <li>见习经理人数:&nbsp;{{details.practiceManagerNumber}}</li>
                <li>正式经理人数:&nbsp;{{details.officialManagerNumber}}</li>
                <li>高级总监人数:&nbsp;{{details.seniorManagerNumber}}</li>
              </ul>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="confirm">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import * as salesman from "../../api/salesman";
import {mapMutations} from 'vuex'
export default {
  data: () => ({
    dialog: false,
    showProgress: true,
    limit: 10,
    offset: 0,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    formTitle: "新增公告",
    queryForm: {
      lftid: "",
      realName: "",
      telphone: "",
      superId: "",
      saleLevel: 1
    },
    tableData: [],
    editedIndex: -1,
    editedItem: {
      keyword: "",
      noticeType: "",
      content: "",
      isValid: false
    },
    details: {
      valid: 1
    },
    levelItems: [
      { text: "见习业务员", value: 1 },
      { text: "正式业务员", value: 2 },
      { text: "高级业务员", value: 3 },
      { text: "见习经理", value: 4 },
      { text: "正式经理", value: 5 },
      { text: "高级经理", value: 6 },
      { text: "见习总监", value: 7 },
      { text: "正式总监", value: 8 },
      { text: "高级总监", value: 9 }
    ],
    salesId: "",
    levelSelect: ""
  }),
  mounted() {
    this.getPerformance(this.limit, this.offset);
  },
  created() {
    // this.initialize();
  },
  computed: {},
  filters: {
    nType(value) {
      if (!value) {
        return "";
      }
      const strVal = value.toString();
      switch (strVal) {
        case "1":
          return "全局公告";
        case "2":
          return "大厅播放";
        case "3":
          return "代理中心播放";
        case "4":
          return "大厅播放";
        default:
          return "暂未定义";
      }
    }
  },
  methods: {
    ...mapMutations(['PROGRESS']),
    getPerformance() {
      this.PROGRESS(true)
      salesman.getPerformance.r({ limit: this.limit, offset: this.offset }).then(({ data }) => {
        if (data.result === 0) {
          this.tableData = data.data.dataList;
          this.pagination.pageCount = data.data.totalCount
            ? Math.ceil(data.data.totalCount / this.limit)
            : 1;
        } else {
        }
      this.PROGRESS(false)
      });
    },
    getDetails(uid) {
      salesman.getDetails.r(uid).then(({ data }) => {
        if (data.result === 0) {
          this.details = data.data;
        } else {
        }
      });
    },
    changeLevel() {
      salesman.changeLevel.r(this.editedItem).then(({ data }) => {
        console.log(data);
        $Vue.$on('toggleSnackbar', {
          text: data.message
        })
        
      });
    },
    initialize() {
      this.tableData = [
        {
          saleLevelText: "游戏公告",
          lftid: "红中麻将",
          nickname: "渲染",
          superId: "100106",
          createTime: "2018-4-19"
        }
      ];
    },
    change(item) {
      this.dialog = true;
      this.editedItem = Object.assign({}, item);
      this.salesId = item.lftid;
      this.getDetails(item.uid);
      this.levelSelect = +item.saleLevel;
      this.formTitle = "更改业务员级别";
      if (+this.editedItem .saleLevel == 1) {
        if (this.levelItems[this.levelItems.length - 1].value !== "0") {
          this.levelItems.push({
            value: 0,
            text: "撤销职位"
          });
        }
      } else {
        this.levelItems.forEach((level, i) => {
          if (level.value == "0") {
            this.levelItems.splice(i, 1);
          }
        });
      }
    },
    confirm() {
      this.changeLevel()
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit
      this.getPerformance();
    },
    search() {}
  }
};
</script>

<style lang="less" scoped>
table th {
  font-size: 15px;
  font-weight: lighter;
  padding: 8px;
}
table tbody td {
  text-align: center;
  border-top: 1px solid #ddd;
  padding: 8px;
  font-size: 16px;
}
table tbody tr {
  transition: all 0.2s ease-in-out;
}
table tbody tr:hover {
  background: #f1f1f1;
}

ul {
  font-size: 16px;
  padding-left: 4px;
  li {
    list-style: none;
    padding: 6px 0;
  }
}
</style>

